將 div 置中的方法

為 Interview Bit 的第 27 題。

其實方法非常多，但這裡簡單介紹 2 種方法，有興趣的可以參考這一篇 [CSS] 元素置中的 N 個方法。

1. 使用 transform

CodePen 範例

使用 position: absolute，inner box 會相對於 <div class='outer'></div>排版。

當使用 top: 50%，left: 50%，inner box 的左上角會在中心點，但是整體看起來並不是在中間的位置。

接下來使用transform:translate(-50%, -50%)，translate() 會根據現在的位置進行水平和垂直的移動，translate(-50%, -50%) 表示將 inner box 水平向左偏移 50%，向上偏移 50%。

2. 使用 Flexbox

CodePen 範例

我們將 outer div 設置 display: flex，並使用 justify-content: center，將 inner div 水平置中，再使用 align-content: center 將 inner div 垂直置中。

參考資料：
[CSS] 元素置中的 N 個方法